<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');

//error handler function
function customError($errno, $errstr)
{
		echo "<b>Error:</b> [$errno] $errstr";
}

//set error handler
set_error_handler("customError");

if (isset($_COOKIE["login_session"]) && $_COOKIE["login_session"]!=""){
?>
<html>
<head>
<script language="javascript" type="text/javascript">

function get_cookie(name){
	var i;
	if (document.cookie.length>0){
		var c_list = document.cookie.split("\;");
		for (i in c_list){
			var cook = c_list[i].split("=");
			if ( cook[0] == name){
				return cook[1];
			}
		}
	}
	return null;
}

function keepconnect(){
	var session = "<?php echo $_COOKIE["login_session"] ?>";
	if (session!=null){
		var update = new XMLHttpRequest();
		var params = 'session=' + session;
		update.open("POST", "getuser.php", false);
		update.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		update.setRequestHeader("Content-length", params.length);
		update.send(params);
		if (update.readyState == 4){
			var text = update.responseText;
			//document.getElementById("users").innerHTML = text;
			if (text=="start"){
				window.location.href = "game.php?uid=<?php echo $_GET["uid"]; ?>";
			}else if (text=="error"){
				alert("Session not found");
				document.cookie = "login_session=; expires=1/01/2000 00:00:00; path=/;";
				window.location.href = "index.php";	
			}else if (text=="epic_error" || text=="epic_error2" || text=="epic_error3"){
				setTimeout("keepconnect()", 3000);
			}else{
				var response = eval("("+text+")");
				for (i in response.joined){
					var text = response.user[i] + "<br/>";
					var user_td = document.getElementById("user" + response.u_num[i]);
					var start_div = document.getElementById("start_game");
					user_td.style.background = "#000000";
					if (response.joined[i]==2){
						text += "<img src=\"img/owner.png\" width=35 height=35/>";
						if (response.u_num[i]==response.current_u_num){
							start_div.innerHTML = "<input type=\"button\" id=\"start\" value=\"Start\" onclick=\"javascript:start();\"/>";
						}
						user_td.style.background = "#00FF00";
					}
					if (response.joined[i]==1){
						if (response.u_num[i]==response.current_u_num){
							start_div.innerHTML = "";
						}
						user_td.style.background = "#FFFF00";
					}
					if (response.u_num[i]==response.current_u_num){
						text += "<img src=\"img/you.png\" width=40 height=55/>";
					}
					var image_path = "";
					switch (response.image[i]){
						case "1":
							image_path = "<img src=\"img/tywong.jpg\" width=100 height=120/><br />";
							break;
						case "2":
							image_path = "<img src=\"img/head.jpg\" width=100 height=120/><br />";
							break;
						case "3":
							image_path = "<img src=\"img/chanfangcheung.jpg\" width=100 height=120/><br />";
							break;
						case "4":
							image_path = "<img src=\"img/tsuilapchee.jpg\" width=100 height=120/><br />";
							break;
						case "5":
							image_path = "<img src=\"img/cc.gif\" width=100 height=120/><br />";
							break;
						case "6":
							image_path = "<img src=\"img/na.jpg\" width=120 height=120/><br />";
							break;
						case "7":
							image_path = "<img src=\"img/uc.gif\" width=120 height=120/><br />";
							break;
						case "8":
							image_path = "<img src=\"img/shaw.gif\" width=120 height=120/><br />";
							break;
						case "9":
							image_path = "<img src=\"img/cuhk.jpg\" width=150 height=120/><br />";
							break;
					}
					text = image_path + text;
					user_td.innerHTML = text;
					var self_text = "";
					if (response.u_num[i]==response.current_u_num){
						self_text += image_path + response.user[i];
						document.getElementById("current_user").innerHTML = "You are user " + response.current_user;
						document.getElementById("selftd").innerHTML = self_text;
					}
				}
				setTimeout("keepconnect()", 3000);
			}
		}
	}else{
		alert("session not found");
		document.cookie = "name=login_session; expires=1/01/2000 00:00:00; path=/;";
		window.location.href = "index.php";
	}
}

function quit(){
	document.cookie = "name=login_session; expires=1/01/2000 00:00:00; path=/;";
	window.location.href = "logout.php";
}

function start(){
	var update = new XMLHttpRequest();
	var params = 'session=<?php echo $_COOKIE["login_session"] ?>';
	update.open("POST", "startgame.php", false);
	update.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	update.setRequestHeader("Content-length", params.length);
	update.send(params);
}

function show_select_photo(event){
	document.getElementById("select_photo").style.top = event.clientY;
	document.getElementById("select_photo").style.left = event.clientX;
	document.getElementById("select_photo").style.display = "inline";
}

function select_photo(num){
	document.getElementById("select_photo").style.top = 0;
	document.getElementById("select_photo").style.left = 0;
	document.getElementById("select_photo").style.display = "none";
	var update = new XMLHttpRequest();
	var params = 'photo=' + num;
	update.open("POST", "changephoto.php", false);
	update.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	update.setRequestHeader("Content-length", params.length);
	update.send(params);
}
</script>
<style>
.table_border{
	border-collapse:separate;
	border-spacing:50px 1px;
}
.td_border{
	border: 1px solid black;
}
table{
	width: 600px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
td{
	width: 200px;
	height: 200px;
	text-align: center;
	vertical-align:top;
}
tr{
	text-align: center;
}
.main{
	text-align: center;
}
.select_photo{
	position: absolute;
	background: #FFFFFF;
	display: none;
}
</style>
</head>
<body onload="javascript:keepconnect()">
<div id="main" class="main">
<table class="table_border">
<tr>
<td class="td_border">
<div id="current_user"></div>
<div id="start_game"></div>
<input type="button" id="quit" value="Quit" onclick="javascript:quit();"/>
<!--<div>Session:</div>
<div id="users"></div>-->
<table style="main_table">
	<tr>
		<td id="user1">1</td>
		<td id="user2">2</td>
		<td id="user3">3</td>
	</tr>
	<tr>
		<td id="user4">4</td>
		<td id="user5">5</td>
		<td id="user6">6</td>
	</tr>
	<tr>
		<td id="user7">7</td>
		<td id="user8">8</td>
		<td id="user9">9</td>
	</tr>
</table>
</td>
<td class="td_border">
<div id="selftd" onclick="javascript:show_select_photo(event);"></div>
<div id="select_photo" class="select_photo">
<img src="image/tywong.jpg" width=40 height=48 onclick="javascript:select_photo(1);"/>
<img src="image/head.jpg" width=40 height=48 onclick="javascript:select_photo(2);"/>
<img src="image/chanfangcheung.jpg" width=40 height=48 onclick="javascript:select_photo(3);"/>
<img src="image/tsuilapchee.jpg" width=40 height=48 onclick="javascript:select_photo(4);"/>
<img src="image/cc.gif" width=40 height=48 onclick="javascript:select_photo(5);"/>
<img src="image/na.jpg" width=48 height=48 onclick="javascript:select_photo(6);"/>
<img src="image/uc.gif" width=48 height=48 onclick="javascript:select_photo(7);"/>
<img src="image/shaw.gif" width=48 height=48 onclick="javascript:select_photo(8);"/>
<img src="image/cuhk.jpg" width=60 height=48 onclick="javascript:select_photo(9);"/>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<?php
}else{
	header('Location: index.php');
}
?>